<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont iconxia2"></span>
    </div>
    <div class="header-input">
      <span class="iconfont iconsousuo2 header_input_search"></span>
      <input class="header_input_kuang" type="text" placeholder="旅游/景点吃喝玩乐">
    </div>
    <div class="header-right">
      城市
      <span class="iconfont iconxia1 header_right_jiantou"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import '~css/variables.styl'
  .header
    display: flex
    line-height: .86rem
    background: $bgColor
    color: #fff
    .header-left
      width: .64rem
      float: left
      text-align: center
    .header-input
      flex: 1
      background: #fff
      border-radius: .1rem
      margin: .12rem 0 .12rem .2rem
      // margin-bottom: .12rem
      // margin-lefe: .2rem
      line-height: .62rem
      color: #000
      .header_input_search
        margin-left: .2rem
      .header_input_kuang
        text-indent: .1rem
        margin-bottom: .06rem
    .header-right
      width: 1.24rem
      float: right
      text-align: center
      .header_right_jiantou
        font-size: .24rem
</style>
